import React, { Component } from 'react';
import Swiper from 'react-id-swiper';
import Image from 'react-uwp/Image';
export default class Distiction extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { distinctList } = this.props;
    const params = {
      initialSlide: 1,
      slideClass: 'custom-slide',
      slideActiveClass: 'custom-slide-active',
      slidesPerView: 3,
      centeredSlides: 'true',
      spaceBetween: 30,
      slideToClickedSlide: 'true'
    };
    return (
      <Swiper {...params} style={{ height: '15.2rem' }}>
        {distinctList.map((item, index) => {
          return (
            <div style={{ position: 'relative' }}>
              <Image src={item.url} className="imgCover" />
              <div className="dfcc wh100 recomdInfo">
                <div className="mask" />
                <div className=" wh100 recomdText">
                  <span className="f24 cff" style={{ padding: '0.4rem' }}>
                    {item.title}
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </Swiper>
    );
  }
}
